<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>登录</title>
    <script src="js/vue.js"></script>
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <script src="js/axios-0.18.0.js"></script>
    <style>
        html{height:100%}
        body{height:80%;margin:0px;padding:0px}
        #container{height:80%}
    </style>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=1.0&type=webgl&ak=hxWYzUbeyuB835exA7HQz6u8mspsp6oa"></script>

</head>
<body>

<div id="container"></div>
<div id="app"></div>
<script>
    var map = new BMapGL.Map("container");          // 创建地图实例
    var point = new BMapGL.Point(120.23661833918746,30.21559436156924);  // 创建点坐标
    map.centerAndZoom(point, 15);
    map.enableScrollWheelZoom(true);
    //map.setHeading(64.5);   //设置地图旋转角度
    //map.setTilt(73);       //设置地图的倾斜角度


    //绑定点击事件
    // 参数充电柜id，可用数量
    function markerclick (name,count,marker,point1){
        var opts = {
            width: 200,
            height: 100,
            title: "充电柜id"+name
        };
        var infoWindow = new BMapGL.InfoWindow('可用：'+count+'/16', opts);
        marker.addEventListener('click', function () {
            map.openInfoWindow(infoWindow, point1); // 开启信息窗口

        });
    }


    //创建标记点
    function getMarkByPoint(ps) {

        console.log(ps);
        var point = new BMapGL.Point(ps.longitude, ps.dimension);
        var marker = new BMapGL.Marker(point);
        markerclick(String(ps.bscid),ps.subscribeable,marker,point);
        map.addOverlay(marker);

    }


    var vue = new Vue({
        el: '#app',
        data: {
            formData: {},//表单数据
            dialogFormVisible: false,//增加表单是否可见
            dialogFormVisible4Edit: false,//编辑表单是否可见
            rules: {//校验规则
                dname1: [
                    {required: true, message: '请输入开发商名称', trigger: 'blur'}
                ]
            },
            points:[]


        },
        //钩子函数，VUE对象初始化完成后自动执行
        created() {
            this.addpoint();//VUE对象初始化完成后调用分页查询方法，完成分页查询
        },
        methods: {

            //添加点标记
            addpoint() {

                // 获取地图中心点
                var cen = map.getCenter();
                //alert('地图中心点: (' + cen.lng.toFixed(5) + ', ' + cen.lat.toFixed(5) + ')');
                axios.get("/BSC/nearby?x=" +cen.lng.toFixed(5)+"&y="+cen.lat.toFixed(5)).then((res) => {
                    if (res.data.flag) {
                        //进行回显，基于VUE的数据绑定实现
                        //res.data.data  devVo
                        this.points = res.data.data;
                        var ps = this.points;
                        for (i=0 ;i<ps.length ;i++) {

                            getMarkByPoint(ps[i]);
                        }

                    } else {
                        //查询失败，弹出提示
                        this.$message.error(res.data.message);
                    }
                });;

            },

            // 弹出添加窗口
            handleCreate() {
                //弹出新增窗口
                this.dialogFormVisible = true;
                this.resetForm();
                this.getProjects(); //新建窗口弹出 查询所有的工程
            },
            // 弹出编辑窗口
            handleUpdate(row) {
                //弹出编辑窗口
                this.dialogFormVisible4Edit = true;
                //使用插槽完成数据的回显
                // this.formData=row;
                //回显数据，发送ajax请求根据ID查询当前数据
                axios.get("/developer/findByDid?did=" + row.did).then((res) => {
                    if (res.data.flag) {
                        //进行回显，基于VUE的数据绑定实现
                        //res.data.data  devVo
                        this.formData = res.data.data.developer;
                        //ids也要赋值
                        this.ids =  res.data.data.ids;

                    } else {
                        //查询失败，弹出提示
                        this.$message.error(res.data.message);
                    }
                });
            }
        }
    })
</script>
</body>
</html>